; (function (w) {
  let costitem = Vue.extend({
    template: `<div v-if="flag" style="position: fixed;left:0;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.5);z-index:999;">
      <div style="width:600px;background:#fff;position:relative;" class="br-4">
        <div class="icon-Gm-close cursor" style="position:absolute;right:0;top:0;height:45px;lineHeight:45px;textAlign:center;width:45px;" @click="cancelSubmit"></div>
        <div class="text-center" style="lineHeight:45px;">新增费项</div>
        <div style="padding:15px 24px;background:rgba(249,249,249,1);">
          <div class="dy-flex line-height-34 border-b">
            <div style="margin-right:10px"><span class="required">*</span>费项类型：</div>
            <div class="dy-fx-5">
              <ul class="cr-type-select clearfix">
                <li @click="selectcostitemType(item.dictCode)" :class="{active: item.dictCode == costitemType}" :style="{marginRight: index < costitemTypeList.length-1 ? '40px' : '0px'}" v-for="(item, index) in costitemTypeList">{{item.dictName}}</li>
              </ul>
            </div>
          </div>
          <div class="dy-flex line-height-34 mt-10" style="height:34px;" v-if="showarr.indexOf('0') != -1">
            <div class="dy-fx-2"><span class="required">*</span>费项名称：</div>
            <div class="dy-fx-5">
              <div class="select-ul" style="width: 240px; height:34px;marginTop:-2px;" v-show="costitemType != 'T' ">
                <span class="select-name br-4 box-i-shadow" style="display:block;color:#999" ref="expensename">请选择费用名称</span>
                <ul>
                  <li v-for="item in costItemList" @click="setCostItem(item)">{{item.name}}</li>
                </ul>
              </div>
              <input type="text" style="width:240px;padding-top:8px;padding-left:14px;" class="form-control inline" v-model="costItemName" placeholder="请填写费用名称" v-show="costitemType == 'T'" />
            </div>
          </div>
          <div class="dy-flex line-height-34 mt-5" v-if="showarr.indexOf('1') != -1">
            <div class="dy-fx-2"><span class="required">*</span>费项本金：</div>
            <div class="dy-fx-5">
              <input type="number" style="width:240px;" class="form-control inline" v-model="costItemAmount" @blur="amount01" />
              <span class="color-999 ml-10">元</span>
            </div>
          </div>
        <div class="line-height-34 mt-5" v-if="showarr.indexOf('2') != -1" v-show="costitemType == 'T'" :class="costitemType == 'T'?'dy-flex':''">
          <div class="dy-fx-2"><span style="color:#fff;">*</span>税率：</div>
          <div class="dy-fx-5">
            <input type="number" style="width:240px;" class="form-control inline" v-model="rate" placeholder="（非必填）" />
            <span class="color-999 ml-10">%</span>
          </div>
        </div>
          <div class="dy-flex line-height-34 mt-5" v-if="showarr.indexOf('3') != -1">
            <div class="dy-fx-2"><span class="required">*</span>默认滞纳金比例：</div>
            <div class="dy-fx-5">
              <input type="number" style="width:240px;" class="form-control inline" v-model="percentage" />
              <span class="color-999 ml-10">%</span>
            </div>
          </div>
          <div class="dy-flex line-height-34 mt-5" v-if="showarr.indexOf('4') != -1">
            <div class="dy-fx-2"><span style="color:#fff;">*</span>备注：</div>
            <div class="dy-fx-5">
              <textarea style="width: 240px;height:90px;" class="form-control" v-model="memo" placeholder="（非必填）"></textarea>
            </div>
          </div>
        </div>
        <div style="padding: 8px 80px;display:flex;justify-content:space-between;">
          <button class="btn n-btn-primary" @click="querySubmit">确认</button>
          <button class="btn n-btn-outline" @click="cancelSubmit" style="min-width: 110px;">取消</button>
        </div>
      </div>
    </div>`,

    props: {
      show: {
        defalut: false,
        type: Boolean
      },
      flowtype: {
        type: String,
      },
      showarr: {
        type: String,
        default: '0124'
      },
      permissions:{
        type:Boolean,
        defalut:false
      }
    },
    data: () => ({
      costitemTypeList: [],
      costitemType: 'S',
      costItemList: [],
      type: 'T',
      costItemName: '',
      costItemNameType: '',
      expenditureId: '',
      costItemAmount: '',
      rate: '',
      percentage: '',
      memo: '',
      flag: false,
    }),
    filters: {

    },
    watch: {
      show(val) {
        this.flag = val;
        this.costitemType = this.flowtype == 'RF' ? 'O' :'S'
        this.costItemName = ''
        this.costItemAmount = ''
        this.expenditureId = ''
        this.percentage = ''
        this.rate = ''
        this.memo = ''
        this.getCostItemList()
        this.getTypeList()
      }
    },
    methods: {
      // 获取费项类型
      getTypeList() {
        var that = this
        hlhttp.get({
          url: 'configure/dict',
          data: {
            module_code: 'CMMN',
            config_name: 'CM_EXPENDITURE_TYPE'
          },
          success: function (res) {
            if(that.flowtype == 'RF'){
              that.costitemTypeList =  [{
                dictName: '应退费项',
                dictCode: 'O'
              }, {
                dictName: '临时费项',
                dictCode: 'T'
              }]
              return
            }
            that.costitemTypeList = res
            that.costitemTypeList.push({
              dictName: '临时费项',
              dictCode: 'T'
            })
          },
        })
      },
      getCostItemList() {
        var that = this;
        let url = ''
        if(this.permissions){
          url = 'expenditures/_list'
        }else{
          url = 'expenditures'
        }
        hlhttp.get({
          url: url,
          data: {
            keyword: '#',
            type: that.costitemType || '#',
            flow_type: that.flowtype,
            page: 1,
            limit: 100000
          },
          success: function (res) {
            that.costItemList = res.expenditures
          }
        })
      },

      selectcostitemType(type) {
        this.costitemType = type
        this.$refs.expensename.innerHTML = '请选择费用名称'
        this.costItemName = ''
        if (type == 'T') return
        this.getCostItemList()
      },
      amount01() {
        if (this.costItemAmount < 0) {
          this.costItemAmount = 0
          hl.toast('金额不能小于0')
        }
      },
      getCostitemData() {
        hlhttp.get({
          url: 'valid_expenditures',
          success: (data) => {
            this.costItemList = data;
            this.costItemList.unshift({
              id: null,
              lateFee: "0",
              name: "租金/押金",
              type: "O"
            })
            this.costItemList.unshift({
              id: null,
              lateFee: "0",
              name: "固定租金",
              type: "R"
            })
          }
        })
      },
      setCostItem(item) {
        this.costItemName = item.name;
        this.costItemNameType = item.type
        this.expenditureId = item.id
        this.rate = item.taxFee || ''
      },
      valiData() {
        if (!this.costItemName && this.showarr.indexOf('0') != -1) {
          let tips = '';
          if (this.costitemType == 'S' || 'O' || 'P') {
            tips = '请选择费项'
          }
          if (this.costitemType == 'T') {
            tips = '请填写费项'
          }
          hl.toast(tips)
          return false
        }
        if (!this.costItemAmount && this.showarr.indexOf('1') != -1) {
          hl.toast('请填写本金')
          return false
        }
        if (!this.percentage && this.showarr.indexOf('3') != -1) {
          hl.toast('请填写默认滞纳金比例')
          return false
        }
        return true;
      },
      querySubmit() {
        if (!this.valiData()) return;
        let data = {
          name: this.costItemName,
          amount: this.costItemAmount,
          rate: this.rate,
          percentage: '0',
          memo: this.memo,
          type: this.costitemType != 'T' ? this.costItemNameType : 'T',
          expenditureId: this.costitemType != 'T' ? this.expenditureId : '#'
        }

        this.$emit('query', data)
      },
      cancelSubmit() {
        let data = {
          name: '',
          amount: '',
          percentage: '',
          memo: '',
          type: ''
        }
        this.$emit('query', data)
      }
    },
    created() {
      hlSelectUi()
    },
    mounted() {
      this.getTypeList();
    }
  })

  Vue.component('web-costitem', costitem);


}(window))
